<template>
    <div class="trigger-timing">
        <el-radio-group v-model="state.executeWay.options.executeType" size="small" @change="changeExecuteType">
            <el-radio label="once">单次触发</el-radio>
            <el-radio label="repeat">重复触发</el-radio>
            <el-radio label="corn">Cron配置</el-radio>
        </el-radio-group>
        <div v-if="state.executeWay.options.executeType === 'once'">
            <div class="trigger-timing-title">触发时间</div>
            <el-date-picker 
                v-model="state.executeWay.options.executeTs" 
                type="datetime" 
                placeholder="选择日期时间"
                value-format="timestamp"
            ></el-date-picker>
        </div>
        <div v-else-if="state.executeWay.options.executeType === 'repeat'">
            <div class="trigger-timing-title">触发频次</div>
            <div class="trigger-timing-frequency">
                <div>每</div>
                <el-select v-model="state.executeWay.options.firstNum" v-if="triggerDateKind === 'd'">
                    <el-option v-for="i in 31" :key="i" :label="i" :value="i"></el-option>
                </el-select>
                <el-select v-model="state.executeWay.options.secondNum" v-else-if="triggerDateKind === 'h'">
                    <el-option v-for="i in 72" :key="i" :label="i" :value="i"></el-option>
                </el-select>
                <el-select v-model="triggerDateKind" @change="changeTriggerDateKind">
                    <el-option label="天" value="d"></el-option>
                    <el-option label="时" value="h"></el-option>
                </el-select>
                <el-select v-model="state.executeWay.options.secondNum" v-if="triggerDateKind === 'd'">
                    <el-option v-for="i in 24" :key="i - 1" :label="i - 1" :value="i - 1"></el-option>
                </el-select>
                <div v-if="triggerDateKind === 'd'">时</div>
            </div>
            <div class="trigger-timing-title">结束时间</div>
            <el-date-picker v-model="state.executeWay.options.finishTs" type="datetime" placeholder="选择日期时间"
                value-format="timestamp"></el-date-picker>
        </div>
        <div v-else-if="state.executeWay.options.executeType === 'corn'">
            <div class="trigger-timing-title">CRON(最低单位为小时)</div>
            <el-input v-model="state.executeWay.options.expression"></el-input>
        </div>
        <div class="trigger-timing-param-title">
            <div class="trigger-timing-title">填写接口参数(JSON)</div>
            <div>
                <el-button type="text" @click="stringifyParams">格式化</el-button>
                <el-button type="text" @click="openCodeHelp">编码规范及使用帮助</el-button>
            </div>
        </div>
        <textarea class="trigger-timing-textarea" v-model="state.executeWay.options.param"></textarea>
    </div>
</template>

<script>
import state from '@src/modules/trigger/view/setting/util/state.js'

export default {
    name: 'TimingTrigger',
    props: {
        options: {
            type: Object,
            default: () => { }
        }
    },
    computed: {
        state() {
            return state;
        },
    },
    created() {
        if (!state.executeWay?.options?.executeType) {
            this.$set(state.executeWay, 'options', {
                executeType: 'once', // 触发类型
                param: JSON.stringify(this.options?.param || {}),
                executeTs: '',
            });
        } else {
            // 确保 param 是字符串
            if (typeof state.executeWay.options.param !== 'string') {
                try {
                    state.executeWay.options.param = JSON.stringify(state.executeWay.options.param);
                } catch (error) {
                    console.error(error);
                    state.executeWay.options.param = '{}';
                }
            }
        }
    },
    data() {
        return {
            triggerDateKind: 'd',
        }
    },
    watch: {
        'state.executeWay.options.param'(newVal, oldVal) {
            try {
                const existing = state._compatibilityList.findIndex(item => item._isTimerJsonParse);
                // 如果不存在则添加到兼容数组中
                if (existing === -1) {
                    state._compatibilityList.push({
                        '_isTimerJsonParse': true,
                        'execute': 'executeWay.options.param',
                    })
                }
            } catch (error) {
                console.error(error)
            }
        }
    },
    methods: {
        changeExecuteType(value) {
            if (value === 'once') {
                this.$set(state.executeWay, 'options', {
                    executeType: 'once', // 触发类型
                    param: JSON.stringify(this.options?.param || {}),
                    executeTs: '',
                });
            } else if (value === 'repeat') {
                this.$set(state.executeWay, 'options', {
                    executeType: 'repeat', // 触发类型
                    param: JSON.stringify(this.options?.param || {}),
                    firstNum: '',
                    firstUnit: '',
                    secondNum: '',
                    secondUnit: '',
                    finishTs: '',
                });
            } else if (value === 'corn') {
                this.$set(state.executeWay, 'options', {
                    executeType: 'corn', // 触发类型
                    param: JSON.stringify(this.options?.param || {}),
                    expression: '',
                });
            }
        },
        stringifyParams() {
            try {
                let json = JSON.parse(state.executeWay.options.param);
                state.executeWay.options.param = JSON.stringify(json, null, '\t')
            } catch (error) {
                console.error(error)
            }
        },
        changeTriggerDateKind(value) {
            if (value === 'd') {
                state.executeWay.options.firstNum = 1;
                state.executeWay.options.secondNum = 0;
            } else if (value === 'h') {
                state.executeWay.options.firstNum = 0;
                state.executeWay.options.secondNum = 1;
            }
        },
        // 打开编码规范及使用帮助
        openCodeHelp() {
            window.open('https://doc.shb.ltd/shb_xoqazk/ia4qctp2ly559d1m/gre7yumc5sz4ewod/dklg7gkm64cya8l4/ox8c8k8i3hp1g6do.html');
        },
    }
}
</script>

<style lang="scss" scoped>
.trigger-timing-textarea {
    width: 100%;
    height: 200px;
}

.trigger-timing-param-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trigger-timing-title {
    height: 32px;
    line-height: 32px;
    margin: 8px 0;
    font-weight: 600;
}

.trigger-timing-frequency {
    display: flex;
    align-items: center;
    ::v-deep .el-select {
        width: 100px;
        margin: 0 8px;
    }
}
</style>